<template>
  <div class="w-full h-full flex justify-between">
    <div class="menu-aside">
      <game-list-aside @init="handleChange" @change="handleChange" />
    </div>
    <div class="view-main">
      <div class="w-full h-full box-border flex flex-col justify-between">
        <div class="form px-[15px] pt-[15px] border-bottom">
          <el-form>
            <el-row :gutter="12">
              <el-col :span="4">
                <el-form-item>
                  <el-input v-model="form.issue" placeholder="期号" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item>
                  <div class="w-full flex justify-between">
                    <el-date-picker
                      v-model="form.date"
                      type="daterange"
                      unlink-panels
                      range-separator="－"
                      start-placeholder="选择开始时间"
                      end-placeholder="选择结束时间"
                      :disabled-date="disableFutureDates"
                    />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-button type="primary" @click.stop="search">搜索</el-button>
                  <el-button type="danger" @click.stop="handleRefresh">清空</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="grow-[1] h-0 mx-[15px] mt-[10px]">
          <el-table
            scrollbar-always-on
            ref="elTableRef"
            v-loading="state.loading"
            :data="list"
            style="width: 100%"
            height="100%"
            border
            stripe
            fit
          >
            <template #empty>
              <ui-empty />
            </template>
            <el-table-column prop="Name" align="center" label="时间" width="170">
              <template #default="{ row }: TableItem">
                <div>
                  {{ formatDate(row.CreatedAt) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="BitchNo"
              label="期号"
              align="center"
              show-overflow-tooltip
              width="120"
            />
            <el-table-column
              prop="Name"
              label="彩票名称"
              align="center"
              show-overflow-tooltip
              min-width="80"
            />
            <el-table-column prop="Name" label="号码" align="center" width="300">
              <template #default="{ row }: TableItem">
                <div class="flex justify-center items-center pt-[5px]">
                  <div v-if="row.CategoryId == GameCategory.sc">
                    <scBall
                      class="!mr-[4px]"
                      :num="item"
                      v-for="item in getlotteryCode(row)"
                    ></scBall>
                  </div>
                  <div v-if="row.CategoryId == GameCategory.ssc">
                    <sscBall
                      class="!mr-[4px]"
                      :num="item"
                      v-for="item in getlotteryCode(row)"
                    ></sscBall>
                  </div>
                  <div
                    class="flex items-center pb-[5px]"
                    v-if="row.CategoryId == GameCategory.pcdd"
                  >
                    <pcddBall class="!mr-[4px]" :num="getlotteryCode(row)[0]"></pcddBall>
                    <pcddBall class="!mr-[4px]" :num="getlotteryCode(row)[1]"></pcddBall>
                    <pcddBall class="!mr-[4px]" :num="getlotteryCode(row)[2]"></pcddBall>
                    <span class="!mr-[4px]">+</span>
                    <pcddBall
                      class="!mr-[4px]"
                      :num="pcddSumLH(getlotteryCode(row)).sum"
                    ></pcddBall>
                  </div>
                  <div class="flex items-center pb-[5px]" v-if="row.CategoryId == GameCategory.lhc">
                    <lhcBall
                      class="!mr-[4px]"
                      :num="item"
                      v-for="item in getlotteryCode(row)"
                    ></lhcBall>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template #header>
                <span v-if="currentData.CategoryId == GameCategory.sc">冠亚和</span>
                <span v-if="currentData.CategoryId == GameCategory.ssc">总和</span>
                <span v-if="currentData.CategoryId == GameCategory.pcdd">总和</span>
                <span v-if="currentData.CategoryId == GameCategory.lhc">特码</span>
              </template>
              <template #default="{ row }: TableItem">
                <div class="flex text-center" v-if="row.CategoryId == GameCategory.sc">
                  <div class="flex-1 border-right">
                    {{ scSumLH(getlotteryCode(row)).sum }}
                  </div>
                  <div class="flex-1 border-right">
                    {{ scSumLH(getlotteryCode(row)).dx }}
                  </div>
                  <div class="flex-1">
                    {{ scSumLH(getlotteryCode(row)).ds }}
                  </div>
                </div>
                <div class="flex text-center" v-if="row.CategoryId == GameCategory.ssc">
                  <div class="flex-1 border-right">
                    {{ sscSumLH(getlotteryCode(row)).sum }}
                  </div>
                  <div class="flex-1 border-right">
                    {{ sscSumLH(getlotteryCode(row)).dx }}
                  </div>
                  <div class="flex-1">
                    {{ sscSumLH(getlotteryCode(row)).ds }}
                  </div>
                </div>
                <div class="flex text-center" v-if="row.CategoryId == GameCategory.pcdd">
                  <div class="flex-1 border-right">
                    {{ pcddSumLH(getlotteryCode(row)).sum }}
                  </div>
                  <div class="flex-1 border-right">
                    {{ pcddSumLH(getlotteryCode(row)).dx }}
                  </div>
                  <div class="flex-1">
                    {{ pcddSumLH(getlotteryCode(row)).ds }}
                  </div>
                </div>
                <div class="flex text-center" v-if="row.CategoryId == GameCategory.lhc">
                  <div class="flex-1 border-right">
                    {{ getLhcTema(row).dx }}
                  </div>
                  <div class="flex-1 border-right">
                    {{ getLhcTema(row).ds }}
                  </div>
                  <div class="flex-1 border-right">
                    {{ colorMap[getLhcTema(row).color as string] }}
                  </div>
                  <div class="flex-1 border-right">
                    {{ getLhcTema(row).sx }}
                  </div>
                  <div class="flex-1">
                    {{ getLhcTema(row).wx }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" v-if="currentData?.CategoryId !== GameCategory.lhc">
              <template #header>
                <span
                  v-if="
                    currentData?.CategoryId == GameCategory.sc ||
                    currentData?.CategoryId == GameCategory.ssc
                  "
                  >1-5龙虎</span
                >
                <span v-if="currentData?.CategoryId == GameCategory.pcdd">组合</span>
              </template>
              <template #default="{ row }: TableItem">
                <div class="flex text-center" v-if="row.CategoryId == GameCategory.sc">
                  <div
                    class="flex-1 border-right"
                    v-for="item in scSumLH(getlotteryCode(row)).labels"
                  >
                    {{ item }}
                  </div>
                </div>
                <div class="flex text-center" v-if="row.CategoryId == GameCategory.ssc">
                  <div class="flex-1">
                    {{ sscSumLH(getlotteryCode(row)).lhh }}
                  </div>
                </div>
                <div class="flex text-center" v-if="row.CategoryId == GameCategory.pcdd">
                  <div class="flex-1 border-right">
                    {{ pcddSumLH(getlotteryCode(row)).bds || "--" }}
                  </div>
                  <div class="flex-1 border-right">
                    {{ pcddSumLH(getlotteryCode(row)).dxds || "--" }}
                  </div>
                  <div class="flex-1">
                    {{ pcddSumLH(getlotteryCode(row)).jdx || "--" }}
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex justify-end my-[10px] mx-[15px]">
          <ui-pagination
            :total="state.total"
            v-model:pageSize="state.pageSize"
            v-model:currentPage="state.page"
            @current-change="getData"
          ></ui-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import scBall from "@/components/ball/sc-ball.vue";
import sscBall from "@/components/ball/ssc-ball.vue";
import pcddBall from "@/components/ball/pcdd-ball.vue";
import lhcBall from "@/components/ball/lhc-ball.vue";

import $bus from "@/utils/bus";
import moment from "moment";
import { disableFutureDates, formatDate, getDateArray } from "@/utils/common";
import { GameCategory } from "@/enums";
import { reqGameHisrory } from "@/api/main";
import { useList } from "@/hooks/useList";
import { pcddSumLH, scSumLH, sscSumLH, lhcSumLH } from "@/utils/game";
import { getBallColor, getBallFive, getBallZodiac } from "@/utils/lhc";

interface Params {
  Issue?: string;
  StartDate?: string;
  EndDate?: string;
  LotteryId?: number;
}
interface TableItem {
  row: HistoryMo;
}
const currentData = ref<GameLeftMo | null>(null);

const colorMap: Record<string, string> = {
  red: "红",
  green: "绿",
  blue: "蓝"
};
const form = reactive({
  issue: "",
  lottery_id: "-1",
  date: getDateArray()["today"]
});

const getParams = () => {
  const params: Params = {};
  if (form.date) {
    params.StartDate = moment(form.date[0]).format("YYYY-MM-DD 00:00:00");
    params.EndDate = moment(form.date[1]).format("YYYY-MM-DD 23:59:59");
  }
  if (form.issue) {
    params.Issue = form.issue;
  }
  if (currentData.value) {
    params.LotteryId = currentData.value?.LotteryId;
  }
  return params;
};
const { elTableRef, state, list, getData, search } = useList<HistoryMo, Params>(
  reqGameHisrory,
  getParams
);

// 获取号码
const getlotteryCode = (item: HistoryMo) => {
  return item.LuckCode.split(",").map(num => Number(num));
};

const getLhcTema = (row: HistoryMo) => {
  const tm = lhcSumLH(getlotteryCode(row)).tema;
  const color = getBallColor(tm);
  const sx = getBallZodiac(tm);
  const wx = getBallFive(tm);
  return {
    color,
    sx,
    wx,
    dx: Number(tm) >= 25 ? "大" : "小",
    ds: Number(tm) % 2 == 0 ? "双" : "单"
  };
};

// 切换游戏
const handleChange = (item: GameListMo) => {
  currentData.value = item;
  state.page = 1;
  state.pageSize = 15;
};

// 重置
const handleRefresh = () => {
  form.lottery_id = "-1";
  form.issue = "";
  form.date = getDateArray()["today"];
  search();
};

watch(
  () => currentData.value,
  () => {
    nextTick(() => {
      getData();
    });
  }
);

onMounted(() => {
  $bus.on("open-result", data => {
    if (data.LotteryId == currentData.value?.LotteryId) {
      getData();
    }
  });
});
onUnmounted(() => {
  $bus.off("open-result");
});
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
  font-size: 13px !important;
}
:deep() {
  .el-input,
  .el-textarea {
    --el-input-bg-color: #f9f9f9;
  }
  .el-table td.el-table__cell {
    padding: 0 !important;
  }
  .el-table td.el-table__cell .cell {
    padding: 0 !important;
    height: 100%;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    font-weight: bold;
  }
}
</style>
